<template>
  <div class="breadcrumb-demo">
    <h3 class="title">基本</h3>
    <div>
      <d-breadcrumb :datas="datas"></d-breadcrumb>
    </div>
    <h3 class="title">自定义icon</h3>
    <div>
      <d-breadcrumb :datas="datas2"></d-breadcrumb>
    </div>
    <h3 class="title">自定义样式与执行</h3>
    <div>
      <d-breadcrumb
        class="breadcrumb-demo3"
        :datas="datas3"
        @click="click"
        selfControl
        separator=">"
      ></d-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  name: 'breadcrumbDemo',
  data () {
    return {
      datas: [
        {
          title: 'Home',
          route: { name: 'Home' }
        },
        {
          title: 'Component',
          route: { name: 'Component' }
        },
        {
          title: 'Breadcrumb'
        }
      ],
      datas2: [
        {
          icon: 'd-icon-home'
        },
        {
          title: 'Component',
          icon: 'd-icon-complete',
          route: { name: 'Component' }
        },
        {
          title: 'Breadcrumb',
          icon: 'd-icon-star'
        }
      ],
      datas3: [
        {
          title: 'Home',
          route: { name: 'Home' }
        },
        {
          title: 'Component',
          route: { name: 'Component' }
        },
        {
          title: 'Breadcrumb'
        }
      ]
    }
  },
  methods: {
    click (data) {
      this.$Message.info(`处理访问${data.title}`, 1000)
    }
  }
}
</script>

<style lang="stylus">
.breadcrumb-demo3
  .d-breadcrumb-item-separator
    color #44C97B
</style>
